```html
<script setup>
  import * as pinInput from "@zag-js/pin-input"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  const service = useMachine(pinInput.machine, { id: "1" })
  const api = computed(() => pinInput.connect(service, normalizeProps))
</script>

<template>
  <div>
    <div ref="ref" v-bind="api.getRootProps()">
      <input v-bind="api.getInputProps({ index: 0 })" />
      <input v-bind="api.getInputProps({ index: 1 })" />
      <input v-bind="api.getInputProps({ index: 2 })" />
    </div>
    <button @click="api.clearValue">Clear</button>
  </div>
</template>
```
